import React, { useEffect, useState } from 'react'
import { Button, InputNumber, Modal, Select, Table } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { nanoid } from 'nanoid'
import TextArea from 'antd/es/input/TextArea'

function Add(props) {
  const [options, setOptions] = useState([])
  const columns = [
    {
      title: '项目',
      dataIndex: 'projectId',
      key: 'projectId',
      render: (text, record) => (
        <div>
          <Select
            options={options}
            className={'w-30'}
            onChange={(value) => {
              changeValue(record, value, 'projectId')
            }}
          />
        </div>
      )
    },
    {
      title: '工时', dataIndex: 'time', key: 'time', width: 150,
      render: (text, record) => (
        <div>
          <InputNumber
            addonAfter={'小时'}
            min={0}
            onChange={(value) => {
              changeValue(record, value, 'time')
            }}
          />
        </div>
      )
    },
    {
      title: '工作内容',
      dataIndex: 'content',
      key: 'content',
      render: (text, record) => (
        <div>
          <TextArea
            onChange={(e) => {
              changeValue(record, e.target.value, 'content')
            }}
          />
        </div>
      )
    },
    {
      title: '操作',
      key: 'action',
      width: 80,
      render: (text, record) => (
        <div>
          <Button
            type={'link'}
            danger
            onClick={() => {
              remove(record)
            }}
          >
            删除
          </Button>
        </div>
      )
    }
  ]

  const [data, setData] = useState([
    {
      key: nanoid(),
      projectId: '',
      time: '',
      content: ''
    }
  ])

  function changeValue(record, value, label) {
    setData(data.map(item => {
      if (item.key === record.key) {
        item[label] = value
      }
      return item
    }))
  }

  function add() {
    setData([...data, {
      key: nanoid(),
      projectId: '',
      time: '',
      content: ''
    }])
  }

  function remove(record) {
    console.log(record.key, data)
    setData(data.filter(item => item.key !== record.key))
  }

  function close() {
    props.onCancel()
    setData([{ key: nanoid(), projectId: null, time: '', content: '' }])
  }

  function save() {
    props.onSave(data)
  }

  async function getProjects() {
    let res = await window.electron.ipcRenderer.invoke('project-list')
    setOptions(res.map(item => {
      return {
        value: item.id,
        label: item.name
      }
    }))
  }

  useEffect(() => {
    if (props.visible) {
      getProjects()
    } else {
      close()
    }
  }, [props.visible])
  return (
    <Modal open={props.visible} onCancel={() => close()} title={'添加'} width={600} onOk={save}>
      <Table columns={columns} dataSource={data} pagination={{ position: ['none'] }}></Table>
      <div className={'mt-4 text-center'}>
        <Button onClick={add}><PlusOutlined /></Button>
      </div>
    </Modal>
  )
}

export default Add
